<template>
    <div class="comment_page">
        <div
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="50">
            <ul class="comment_area" v-if="commentList.length>0">
                <li class="comment_list border-bottom-1px" v-for="(item, index) in commentList" :key="index" @click="handleShowComment(item)" >
                    <div class="reply_pic">
                        <img class="avatar" v-if="item.user.avatar" :src="item.user.avatar" alt="">
                        <i class="grade" v-if="item.user.userType==1"><img src="~img/v_blue@2x.png" alt=""></i>
                        <i class="grade" v-if="item.user.userType==2"><img src="~img/v_yellow@2x.png" alt=""></i>
                    </div>
                    <div class="reply_content">
                        <p class="line1">
                            <span class="name">{{item.user.nickName}}</span>
                            <img class="tag tagImg" v-if="tag(1,item)" src="~img/guan.png" alt="">
                            <img class="tag tagImg" v-if="tag(0,item)" src="~img/zheng.png" alt="">
                            <img class="tag tagImg" v-if="tag(2,item)" src="~img/jiao.png" alt="">
                            <!-- <span ></span> -->
                            <!-- <span class="tag tagImg"><img src="~img/zheng.png" alt=""></span> -->
                            <!-- <span class="tag tagImg"><img src="~img/jiao.png" alt=""></span> -->
                            <span class="time">{{item.createAt}}</span>
                        </p>
                        <p class="line2">{{item.content}}</p>
                        <ul class="reply2" v-if="item.replys.lists.length>0">
                            <li v-for="(replay, index) in item.replys.lists" :key="index"><span>{{replay.fromNickName}}</span>{{replay.toNickname?(' 回复 '+replay.toNickname):''}}：{{replay.content}}</li>
                            <li v-if="item.replys.lists.length>=3" class="show_reply"><span  >查看{{item.replys.totalReplyNum}}条回复</span></li>
                        </ul>
                        <div class="cont">
                            <img src="~img/dianzan.png" alt=""><span>{{item.likeNum}}</span>
                            <!-- <img src="~img/huifu.png" alt=""><span>{{item.replys.totalReplyNum}}</span> -->
                        </div>
                    </div>
                </li>
            </ul>
            <div class="no_comment" v-else>
                <div class="lay_center">
                    <img src="~img/noComment@2x.png" alt="">
                    <p>暂无任何回复</p>
                </div>
            </div>
        </div>
        <div v-if="commentDialog">
            <comment-detail :commentId="commentId" :commentDialog="commentDialog" v-on:handleClose="handleClose"></comment-detail>
        </div>
    </div>
</template>
<script>
import commentDetail from 'components/commentDetail'
import {getUrlString, query, queryJson} from 'utils/index'
export default {
    props: {
        cType:{
            type: String,
            required: true
        },
        multiId: {
            type: Number,
            required: true
        },
        currentPage: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            commentDialog: false,
            commentList: [],
            commentId:'',
            loading: false,
            page:1
        }
    },
    created() {
        this.queryData()
    },
    methods: {
        tag(key,item) {
            let tags = item.user.tag||[],flog= false
            for (let index = 0; index < tags.length; index++) {
                if(key == tags[index]){
                    flog = true
                }
            }
            return flog
        },
        queryData() {
            this.loading = true
            let param = {
                cType:this.cType,
                multiId: this.multiId,
                currentPage: this.page,
                pagePerNum: 15
            }
            this.$http.post('V8/comments/getCommentsList',{data:param})
            .then(res=>{
                let data = res.data
                // this.commentList = data||[]
                data.forEach(element => {
                    this.commentList.push(element)
                });
                if(data.length){
                    this.loading = false
                }else{
                    return
                }
                this.page++
            })
            .catch(err=>{
            console.log(err)
            })
        },
        handleShowComment(item) {
            if(item.replys.lists.length<3) return
            this.commentId = item.id
            this.commentDialog = true
            this.$emit('overbody', true)
        },
        handleClose(val) {
            this.commentDialog = val
            this.$emit('overbody', false)
        },
        loadMore(){
            this.queryData()
        },
    },
    components: {
        commentDetail
    }
}
</script>
<style lang="scss" scoped>
    @import 'styles/variables.scss';
    @import 'styles/mixin.scss';
    .comment_area{
        color: $black;
        padding-top: 0.16rem;
        padding-bottom: 1.00rem;
        .comment_list{
            display: flex;
            padding-right: 0.32rem;
            padding-bottom: 0.20rem;
            .reply_pic{
                min-width: 0.68rem;
                max-width: 0.68rem;
                height: 0.68rem;
                margin-right: 0.18rem; 
                position: relative;
                .avatar{
                    border-radius: 100%;
                    overflow: hidden;
                    display: block;
                    width: 0.68rem;
                    height: 0.68rem;
                    margin: 0 auto;
                }
                .grade{
                    position: absolute;
                    display: block;
                    width: 0.26rem;
                    height: 0.26rem;
                    right: 0rem;
                    bottom: 0rem;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    } 
                }
            }
            .reply_content{
                width:100%;
                .line1{
                    height: 0.68rem;
                    width: 100%;
                    font-size: 0.28rem;
                    font-weight: 400;
                    line-height: 0.44rem;
                    padding-top: 0.18rem;
                    .name{
                        display: block;
                        float: left;
                        margin-right: 0.04rem;
                    }
                    .tag{
                        display: inline-block;
                        padding: 0rem 0.10rem;
                        color: $white;
                        line-height: 0.30rem;
                        font-size: 0.20rem;
                        border-radius: 0.06rem;
                        margin-left: 0.12rem;
                        &.tagImg{
                            float: left;
                            padding:0px;
                            vertical-align: middle;
                            margin-left:0px;
                            width: 0.44rem;
                            img{
                                // display: block;
                                // float:left;
                            }
                        }
                        &.tag1{
                            background: $blue;
                        }
                        &.tag2{
                            background: $red;
                        }
                    }
                    .time{
                        float: right;
                        font-size: 0.24rem;
                        color: #bbbbbb;
                    }
                }
                .line2{
                    margin-top: 0.20rem;
                    font-size: 0.28rem;
                    font-weight: 400;
                    line-height: 0.53rem;
                }
                .reply2{
                    padding: 0.26rem 0.30rem;
                    margin-top: 0.24rem;
                    background-color: #F7F7F7;
                    border-radius: 0.16rem;
                    &>li{
                        margin-top: 2px;
                        font-size: 0.28rem;
                        line-height: 0.42rem;
                        font-weight: 400;
                        span{
                            color: $blue;
                        }
                    }
                    .show_reply{
                        margin-top: 0.30rem;
                        font-size:0.28rem;
                        height: 0.42rem;
                        line-height: 0.42rem;
                        font-weight: 500;
                        color: $blue;
                    }
                }
                .cont{
                    margin-top: 0.24rem;
                    line-height: 0.48rem;
                    span{
                        vertical-align: top;
                        margin-left: 0.08rem;
                        margin-right: 0.80rem;
                        display: inline-block;
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: $gray;
                    }
                    img{
                        display: inline-block;
                        vertical-align: top;
                        width: 0.48rem;
                        height: 0.48rem;
                    }
                }
            }
        }
    }
    .no_comment{
        // height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .lay_center{
            padding: 1.60rem 0rem;
            img{
                margin: 0 auto;
                display: block;
                width: 2.36rem;
            }
            p{
                text-align: center;
                margin:0.45rem 0px;
                font-size: 0.28rem;
                line-height: 0.42rem;
                color: $ccc;
            }
        }
    }
</style>

